<template>
  <div>
    <el-button type="danger" @click="addFirst">添加一级分类</el-button>
    <hr style="margin: 30px -30px" />
    <div>
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="category-wrap">
            <div
              class="category"
              v-for="firstItem in category.items"
              :key="firstItem.id"
            >
              <h4>
                <svg-icon iconClass="minus" />{{ firstItem.categoryName }}
                <div class="button-group">
                  <el-button
                    size="mini"
                    type="danger"
                    round
                    @click="editFirst(firstItem)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    round
                    @click="addChildren(firstItem)"
                    >添加子级</el-button
                  >
                  <el-button
                    size="mini"
                    round
                    @click="deleteItemConfirm(firstItem.id)"
                    >删除</el-button
                  >
                </div>
              </h4>
              <ul v-if="firstItem.children">
                <li
                  v-for="childrenItem in firstItem.children"
                  :key="childrenItem.id"
                >
                  {{ childrenItem.categoryName }}
                  <div class="button-group">
                    <el-button
                      size="mini"
                      type="danger"
                      round
                      @click="
                        editChildren(firstItem.categoryName, childrenItem)
                      "
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      round
                      @click="deleteItemConfirm(childrenItem.id)"
                      >删除</el-button
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <h4 class="menu-title">一级分类编辑</h4>
          <el-form
            ref="categoryForm"
            :model="formDate"
            label-position="right"
            label-width="142px"
            class="from-wrap"
          >
            <el-form-item
              prop="categoryName"
              label="一级分类名称："
              v-if="firstCategoryShow"
            >
              <el-input
                v-model="formDate.categoryName"
                :disabled="firstCategoryDisabled"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="secCategoryName"
              label="二级分类名称："
              v-if="childrenCategoryShow"
            >
              <el-input
                v-model="formDate.secCategoryName"
                :disabled="childrenCategoryDisabled"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                @click="submit"
                :loading="submitLoading"
                :disabled="submitDisabled"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import svgIcon from "../../icons/svg-icon.vue";
import { ElMessage } from "element-plus";
import {
  addFirstCategory,
  editCategory,
  addChildrenCategory,
  deleteCategory,
} from "@/api/news";
import { getInfoCategoryList } from "@/api/common";
export default {
  components: { svgIcon },
  name: "infoCategory",
  setup() {
    const { proxy } = getCurrentInstance();

    // 表单
    const categoryForm = ref(null);

    // 提交按钮类型
    const submitButtonType = ref("");

    // 一级、二级分类是否显示
    const firstCategoryShow = ref(true);
    const childrenCategoryShow = ref(true);

    // 表单是否禁用
    const firstCategoryDisabled = ref(true);
    const childrenCategoryDisabled = ref(true);
    const submitDisabled = ref(true);

    // 提交按钮加载状态
    const submitLoading = ref(false);

    // 删除id
    const deleteId = ref("");

    // 表单数据
    const formDate = reactive({
      categoryName: "",
      secCategoryName: "",
    });

    const category = reactive({
      items: [],
      current: {},
    });

    // 表单提交
    const submit = () => {
      if (submitButtonType.value == "first_add") {
        addFirstSubmit();
      } else if (submitButtonType.value == "first_edit") {
        let requestData = {
          id: category.current.id,
          categoryName: formDate.categoryName,
        };
        editSubmit(requestData);
      } else if (submitButtonType.value == "children_add") {
        addChildrenSubmit();
      } else if (submitButtonType.value == "children_edit") {
        let requestData = {
          id: category.current.id,
          categoryName: formDate.secCategoryName,
        };
        editSubmit(requestData);
      }
    };

    // 添加一级分类
    const addFirstSubmit = () => {
      if (!formDate.categoryName) {
        ElMessage({
          message: "分类名称不能为空",
          type: "error",
        });
        return false;
      }
      // 提交按钮加载状态
      submitLoading.value = true;
      addFirstCategory({ categoryName: formDate.categoryName })
        .then((response) => {
          let data = response.data;
          ElMessage({
            message: data.message,
            type: "success",
          });

          // 添加分类数组元素
          category.items.push(data.data);

          submitLoading.value = false;
          categoryForm.value.resetFields();
        })
        .catch((error) => {
          submitLoading.value = false;
          categoryForm.value.resetFields();
        });
    };

    // 编辑分类
    const editSubmit = (requestData) => {
      if (!category.current.id) {
        ElMessage({
          message: "未选择分类",
          type: "error",
        });
        return false;
      }

      // 提交按钮加载状态
      submitLoading.value = true;
      editCategory(requestData)
        .then((response) => {
          let data = response.data;
          ElMessage({
            message: data.message,
            type: "success",
          });

          // 修改分类数组元素
          category.current.categoryName = data.data.categoryName;

          submitLoading.value = false;
          categoryForm.value.resetFields();
          category.current = {};
        })
        .catch((error) => {
          submitLoading.value = false;
          categoryForm.value.resetFields();
          category.current = {};
        });
    };

    // 添加子级分类
    const addChildrenSubmit = () => {
      if (!formDate.secCategoryName) {
        ElMessage({
          message: "分类名称不能为空",
          type: "error",
        });
        return false;
      }
      // 提交按钮加载状态
      submitLoading.value = true;
      let requestData = {
        parentId: category.current.id,
        categoryName: formDate.secCategoryName,
      };
      addChildrenCategory(requestData)
        .then((response) => {
          let data = response.data;
          ElMessage({
            message: data.message,
            type: "success",
          });

          // 添加分类数组元素
          category.current.children.push(data.data);

          submitLoading.value = false;
          categoryForm.value.resetFields();
        })
        .catch((error) => {
          submitLoading.value = false;
          categoryForm.value.resetFields();
        });
    };

    // 添加一级分类
    const addFirst = () => {
      submitButtonType.value = "first_add";
      firstCategoryShow.value = true;
      firstCategoryDisabled.value = false;
      childrenCategoryShow.value = false;
      submitDisabled.value = false;
    };

    // 编辑一级分类
    const editFirst = (item) => {
      submitButtonType.value = "first_edit";
      firstCategoryShow.value = true;
      firstCategoryDisabled.value = false;
      childrenCategoryShow.value = false;
      submitDisabled.value = false;
      formDate.categoryName = item.categoryName;
      category.current = item;
    };

    // 添加子级分类
    const addChildren = (item) => {
      submitButtonType.value = "children_add";
      firstCategoryShow.value = true;
      firstCategoryDisabled.value = true;
      childrenCategoryShow.value = true;
      childrenCategoryDisabled.value = false;
      submitDisabled.value = false;
      formDate.categoryName = item.categoryName;
      category.current = item;
    };

    // 编辑子级分类
    const editChildren = (categoryName, item) => {
      submitButtonType.value = "children_edit";
      firstCategoryShow.value = true;
      firstCategoryDisabled.value = true;
      childrenCategoryShow.value = true;
      childrenCategoryDisabled.value = false;
      submitDisabled.value = false;
      formDate.categoryName = categoryName;
      formDate.secCategoryName = item.categoryName;
      category.current = item;
    };

    // 删除分类
    const deleteItemConfirm = (categoryId) => {
      deleteId.value = categoryId;
      proxy.confirm({
        content: "确认删除此信息",
        tip: "警告",
        successFn: deleteItem,
        cancelFn: () => {
          deleteId.value = "";
        },
      });
    };

    // 删除分类
    const deleteItem = () => {
      deleteCategory({ id: deleteId.value })
        .then((response) => {
          ElMessage({
            type: "success",
            message: response.data.message,
          });

          // 重新查询
          getCategory();

          deleteId.value = "";
        })
        .catch((error) => {});
    };

    let getCategory = () => {
      // 获取分类
      getInfoCategoryList({
        callback: (response) => {
          category.items = response;
        },
      });
    };

    onMounted(() => {
      // 获取分类
      getCategory();
    });

    return {
      categoryForm,
      firstCategoryShow,
      childrenCategoryShow,
      firstCategoryDisabled,
      childrenCategoryDisabled,
      submitDisabled,
      submitLoading,
      formDate,
      category,
      submit,
      addFirst,
      editFirst,
      addChildren,
      editChildren,
      deleteItemConfirm,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/config.scss";
.category-wrap {
  div:first-child {
    &:before {
      top: 20px;
    }
  }
  div:last-child {
    &:before {
      bottom: 21px;
    }
  }
}
.category {
  position: relative;
  line-height: 44px;
  cursor: pointer;
  &:before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 32px;
    border-left: 1px dotted #000;
  }
  h4 {
    padding-left: 40px;
  }
  svg {
    position: absolute;
    left: 14px;
    top: 15px;
    background-color: #fff;
    font-size: 17px;
  }
  li {
    position: relative;
    padding-left: 36px;
    margin-left: 24px;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 22px;
      width: 32px;
      border-bottom: 1px dotted #000;
    }
  }
  li,
  h4 {
    @include webkit(transition, all 0.3s ease 0s);
    &:hover {
      background-color: #f3f3f3;
      .button-group {
        display: block;
      }
    }
  }
}
.button-group {
  display: none;
  position: absolute;
  z-index: 2;
  right: 11px;
  top: -1px;
  button {
    font-size: 12px;
  }
}
.menu-title {
  line-height: 44px;
  background-color: #f3f3f3;
  padding-left: 22px;
}
.from-wrap {
  width: 410px;
  padding-top: 26px;
}
</style>